<template>
  <div class="dashboard-editor-container">
    <!-- 开始 -->
    <div class="index-top">
      <div class="index-top-3">
        <div class="index-top-3-top">
          <el-date-picker
            style="height: 35px; margin-left: 30px; width: 250px"
            v-model="dateRangeListDay"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="getDataLegendListDay()"
          >
          </el-date-picker>
        </div>
        <div class="index-top-3-bottom">
          <LineChart3
            text="线路区域项目访问量-到天"
            height="350px"
            :dataLegend="dataLegendListDay"
            :dataAxis="dataAxisListDay"
            :series="seriesListDay"
          />
        </div>
      </div>
      <div class="index-top-3">
        <div class="index-top-3-top">
          <el-date-picker
            style="height: 35px; margin-left: 30px; width: 250px"
            v-model="dateRangeListMonth"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="getDataLegendListMonth()"
          >
          </el-date-picker>
        </div>
        <div class="index-top-3-bottom">
          <LineChart3
            text="线路区域项目访问量-到月"
            height="350px"
            :dataLegend="dataLegendListMonth"
            :dataAxis="dataAxisListMonth"
            :series="seriesListMonth"
          />
        </div>
      </div>
    </div>
    <!-- 结束 -->
    <!-- 开始 -->
    <div class="index-top">
      <div class="index-top-3">
        <div class="index-top-3-top">
          <el-date-picker
            style="height: 35px; margin-left: 30px; width: 250px"
            v-model="dateRangeDetailSight"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="getDataLegendDetailSight()"
          >
          </el-date-picker>
        </div>
        <div class="index-top-3-bottom">
          <LineChart3
            text="景点详情访问量"
            height="350px"
            :dataLegend="dataLegendDetailSight"
            :dataAxis="dataAxisDetailSight"
            :series="seriesDetailSight"
          />
        </div>
      </div>
      <div class="index-top-3">
        <div class="index-top-3-top">
          <el-date-picker
            style="height: 35px; margin-left: 30px; width: 250px"
            v-model="dateRangeDetailNotice"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="getDataLegendDetailNotice()"
          >
          </el-date-picker>
        </div>
        <div class="index-top-3-bottom">
          <LineChart3
            text="公告详情访问量"
            height="350px"
            :dataLegend="dataLegendDetailNotice"
            :dataAxis="dataAxisDetailNotice"
            :series="seriesDetailNotice"
          />
        </div>
      </div>
    </div>
    <!-- 结束 -->
    <!-- 开始 -->
    <div class="index-top">
      <div class="index-top-3" style="width: 99%">
        <div class="index-top-3-top">
          <el-date-picker
            style="height: 35px; margin-left: 30px; width: 250px"
            v-model="dateRangeCylinderScreen"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="getDataLegendCylinderScreen()"
          >
          </el-date-picker>
        </div>
        <div class="index-top-3-bottom">
          <LineChart3
            text="圆柱屏访问量统计"
            height="350px"
            :dataLegend="dataLegendCylinderScreen"
            :dataAxis="dataAxisCylinderScreen"
            :series="seriesCylinderScreen"
          />
        </div>
      </div>
    </div>
    <!-- 结束 -->

  </div>
</template>

<script>
import { statisticsBarList, statisticsBarSight, statisticsBarNotice, statisticsBarCylinderScreen } from "@/api/app/appAccessLog";
import LineChart from "@/views/dashboard/LineChart";
import LineChart3 from "@/views/dashboard/LineChart3";
import { getToken, getExpiresIn, setExpiresIn } from "@/utils/auth";

export default {
  name: "AppAccessLog",
  components: {
    LineChart,
    LineChart3,
  },
  data() {
    return {
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: "",
      today: new Date(),
      //列表页按日
      dateRangeListDay: [],
      dataLegendListDay: [],
      dataAxisListDay: [],
      seriesListDay: [],
      //列表页按月
      dateRangeListMonth: [],
      dataLegendListMonth: [],
      dataAxisListMonth: [],
      seriesListMonth: [],
      //列表页按年，暂时不做
      dateRangeListYear: [],
      dataLegendListYear: [],
      dataAxisListYear: [],
      seriesListYear: [],
      //详情页景点
      dateRangeDetailSight: [],
      dataLegendDetailSight: [],
      dataAxisDetailSight: [],
      seriesDetailSight: [],
      //详情页公告
      dateRangeDetailNotice: [],
      dataLegendDetailNotice: [],
      dataAxisDetailNotice: [],
      seriesDetailNotice: [],
      //圆柱屏
      dateRangeCylinderScreen: [],
      dataLegendCylinderScreen: [],
      dataAxisCylinderScreen: [],
      seriesCylinderScreen: [],
    };
  },
  created() {
    this.dateRangeListDay = [this.getDaysAgo(7), new Date(this.today).toISOString().split('T')[0]];//默认7天
    this.dateRangeListMonth = [this.getMonthsAgo(6), new Date(this.today).toISOString().split('T')[0]];//默认6个月
    this.dateRangeDetailSight = [this.getDaysAgo(30), new Date(this.today).toISOString().split('T')[0]];//默认30天
    this.dateRangeDetailNotice = [this.getDaysAgo(30), new Date(this.today).toISOString().split('T')[0]];//默认30天
    this.dateRangeCylinderScreen = [this.getDaysAgo(30), new Date(this.today).toISOString().split('T')[0]];//默认7天
    this.getDataLegendListDay(this.dateRangeListDay);
    this.getDataLegendListMonth(this.dateRangeListMonth);
    this.getDataLegendDetailSight(this.dateRangeDetailSight);
    this.getDataLegendDetailNotice(this.dateRangeDetailNotice);
    this.getDataLegendCylinderScreen(this.dateRangeCylinderScreen);
  },
  methods: {
    setDefaultBarSeries(item){
      item.type = 'bar';
      item.label={
        show: true,
        position: 'insideBottom',
        distance: 15,
        align: 'left',
        verticalAlign: 'middle',
        rotate: 90,
        // position: 'inside', // 设置文字位置在柱子内部
        formatter: '{c}', // {c} {name|{a}} 代表数据值
        textStyle: {
          color: '#000', // 文字颜色
          fontSize: 14 // 文字大小
        },
        rich: {
          name: {}
        }
      };
      item.barGap = 0;
      item.emphasis = {
        focus: 'series'
      };
    },
    /** 查询APP访问记录列表 */
    getDataLegendListDay() {
      if(this.dateRangeListDay.length<2){
        return;
      }
      statisticsBarList(this.dateRangeListDay[0], this.dateRangeListDay[1], 1).then(response => {
        this.dataLegendListDay = response.data.dataLegend;
        this.dataAxisListDay = response.data.dataAxis;
        this.seriesListDay = response.data.series.filter(item=>{
          this.setDefaultBarSeries(item);
          return item;
        });
      });
    },
    getDataLegendListMonth() {
      if(this.dateRangeListMonth.length<2){
        return;
      }
      statisticsBarList(this.dateRangeListMonth[0], this.dateRangeListMonth[1], 2).then(response => {
        this.dataLegendListMonth = response.data.dataLegend;
        this.dataAxisListMonth = response.data.dataAxis;
        this.seriesListMonth = response.data.series.filter(item=>{
          this.setDefaultBarSeries(item);
          return item;
        });
      });
    },
    getDataLegendDetailSight() {
      if(this.dateRangeDetailSight.length<2){
        return;
      }
      statisticsBarSight(this.dateRangeDetailSight[0], this.dateRangeDetailSight[1]).then(response => {
        this.dataLegendDetailSight = response.data.dataLegend;
        this.dataAxisDetailSight = response.data.dataAxis;
        this.seriesDetailSight = response.data.series.filter(item=>{
          this.setDefaultBarSeries(item);
          return item;
        });
      });
    },
    getDataLegendDetailNotice() {
      if(this.dateRangeDetailNotice.length<2){
        return;
      }
      statisticsBarNotice(this.dateRangeDetailNotice[0], this.dateRangeDetailNotice[1]).then(response => {
        this.dataLegendDetailNotice = response.data.dataLegend;
        this.dataAxisDetailNotice = response.data.dataAxis;
        this.seriesDetailNotice = response.data.series.filter(item=>{
          this.setDefaultBarSeries(item);
          return item;
        });
      });
    },
    getDataLegendCylinderScreen() {
      if(this.dateRangeCylinderScreen.length<2){
        return;
      }
      statisticsBarCylinderScreen(this.dateRangeCylinderScreen[0], this.dateRangeCylinderScreen[1]).then(response => {
        this.dataLegendCylinderScreen = response.data.dataLegend;
        this.dataAxisCylinderScreen = response.data.dataAxis;
        this.seriesCylinderScreen = response.data.series.filter(item=>{
          this.setDefaultBarSeries(item);
          return item;
        });
      });
    },
    getDaysAgo(days) {
      const date = new Date(this.today);
      date.setDate(date.getDate() - days);
      return date.toISOString().split('T')[0]; // 格式化为YYYY-MM-DD
    },
    getMonthsAgo(months) {
      const today = new Date(this.today);
      //月份是从0开始的，所以要减去1
      today.setMonth(today.getMonth() - months);
      return today.toISOString().split('T')[0];
    },
    // 实时检测刷新token
    refreshToken() {
      this.refreshTime = setInterval(() => {
        if (null === getToken()) {
          return;
        }
        const expires_in = getExpiresIn();
        if (expires_in <= 1000 && !this.refreshLock) {
          this.refreshLock = true;
          this.$store.dispatch("RefreshToken").catch(() => {
            clearInterval(this.refreshTime);
          });
          this.refreshLock = false;
        }
        this.$store.commit("SET_EXPIRES_IN", expires_in - 10);
        setExpiresIn(expires_in - 10);
      }, 10000);
    },
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  // background-color: rgb(240, 242, 245);
  min-height: 100vh;
  background: #f2f8ff;
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .index-top {
    display: flex;
    align-content: center;
    justify-content: space-between;
    height: 44.5vh;
    div {
      height: 100%;
    }
    .index-top-1 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 19%;
      .index-top-1-li {
        display: flex;
        align-items: center;
        height: 31%;
        background: #fff;
        border-radius: 5px;
        .index-top-1-li-left {
          display: flex;
          justify-content: center;
          align-content: center;
          width: 30%;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          img {
            width: 40px;
            object-fit: contain;
          }
        }
        .index-top-1-li-right {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 70%;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          .num {
            font-size: 30px;
            font-weight: bold;
          }
          .title {
            margin-top: 6px;
            font-size: 13px;
          }
        }
      }
    }
    .index-top-2 {
      padding-top: 2%;
      width: 49.5%;
      background: #fff;
    }
    .index-top-3 {
      padding: 15px;
      width: 49.5%;
      background: #fff;
      .index-top-3-top {
        display: flex;
        justify-content: right;
        height: 35px;
        .index-top-3-top-li {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 35px;
          border: 1px solid #999;
          color: #999;
          font-size: 14px;
          cursor: pointer;
        }
        .active {
          border: 1px solid #2d8cf0 !important;
          color: #2d8cf0 !important;
        }
      }
      .index-top-3-bottom {
        margin-top: 20px;
      }
    }
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
